<template>
  <div>
    <div v-if="!isApp">
      <vue-head :propMoreHead="false" :ifGoBackHome="true"></vue-head>
    </div>
    <div class="fixedFill"></div>
    <div v-if="!isApp" class="fixedspace"></div>
    <!-- 详情 -->
    <div class="detail-main pb-200 bg-f1 fw">
      <div class="detail-content  fw bg-fff">
        <!-- 大于8张图片 -->
        <div v-if="firstImage" class="swiper-container border-bottom piccont" @click="show(0)">
          <div class="swiper-wrapper text-center middle" :style="{width:midwidth}" style="background-color:#000">
            <img v-show="firstImageNext" :src="firstImageNext" class="previewer-demo-img" />
            <!--<img v-show="!firstImage" src="~images/default_img_info.jpg" style="width:100%;margin-top:-3px;"-->
            <!--class="previewer-demo-img"/>-->
          </div>
          <div class="swiper-tip text-center color-fff f28" v-show="imageList.length>0">
            <span v-show="imageList.length>0">点击查看（共{{imageList.length}}张图片）</span>
          </div>
        </div>
        <div class="detail-bt fw text-left">
          <span class="detail-left fl f32 color-000">{{goodsInfo.title || goodsEO.Title || goodsEO.propertyValuesTitle || goodsEO.title}}</span>
          <span class="detail-right shareopen fr f24 text-center mr-30 mt-30" @click="shareClick(firstImageNext,(goodsInfo.title || goodsEO.Title || goodsEO.propertyValuesTitle || goodsEO.title),goodsEO.gameName,qf)">分享</span>
        </div>
        <!--首次出售 截图认证 安心买-->
        <div class="detail-tutorial f32 fr text-left border-bottom bg-f8 " v-show="goodsInfo.is_robot_capture==='true'||goodsEO.isAxm||goodsEO.isCloudAccount==true || is_mjbx || is_zhbp" @click="popupVisible=true">
          <div class="hrgames-cfi f26 color-666 fl">
            <i class="firm mr-30 hide">首次出售</i>
            <i class="firm mr-30 " v-show="goodsInfo.is_robot_capture==='true'">截图认证</i>
            <i class="firm mr-20 " v-show="goodsEO.isCloudAccount ==true">云验号</i>
            <i class="firm mr-30 " v-show="goodsEO.isAxm">安心买</i>
            <i class="firm mr-30 " v-show="is_mjbx">卖家保险</i>
            <i class="firm mr-30 " v-show="is_zhbp">找回包赔</i>
          </div>
          <a href="javascript:;" @click="popupVisible=true" class="sharembgs"></a>
        </div>
        <!--首次出售 截图认证 安心买 说明-->
        <select-red-paper :goodsEO="goodsEO" v-if="goodsEO.gameId&&isApp"></select-red-paper>
        <mt-popup v-model="popupVisible" position="bottom" style="width: 100%">
          <div class="sv-guarantee border-top bg-fff">
            <div class="scgtee-titl f32 color-666 border-bottom">
              <a class="close mr-30" @click="popupVisible=false"></a>服务保障
            </div>
            <div class="scgtee-demo px-30 border-bottom" v-if="goodsInfo.is_robot_capture==='true'">
              <div class="sgde-lf fl">
                <i class="tu"></i>
              </div>
              <div class="sgde-tn">
                <div class="tn-til f28 color-000">截图认证</div>
                <div class="tn-txt f28 color-666 mt-10">此帐号已通过5173上号截图认证！</div>
              </div>
            </div>
            <div class="scgtee-demo px-30 border-bottom" v-if="goodsEO.isAxm">
              <a @click="clickAnXin()" href="javascript:void()">
                <div class="sgde-lf fl">
                  <i class="an"></i>
                </div>
                <div class="sgde-tn">
                  <div class="tn-til f28 color-000">安心买</div>
                  <div class="tn-txt f28 color-666 mt-10">此帐号卖家已开通安心买服务，承诺帐号如被找回将全额赔付！
                    <a class="axmore">查看详情></a>
                  </div>
                </div>
              </a>
            </div>
            <div class="scgtee-demo p-30 border-bottom" v-if="is_mjbx">
              <div class="sgde-lf fl">
                <i class="mai"></i>
              </div>
              <span class="f28 color-000">卖家保险</span>
              <p class="f28 color-666 pl-52 lh-52">卖家已为商品投保，如商品被找回、封号等，待交易转账成功后，你可以申请赔付。</p>
            </div>
            <div class="bomb-content" v-if="is_zhbp">
                <div class="p-30 border-bottom">
                    <span class="span-icon-zhao f28 color-000">找回包赔</span>
                    <p class="f28 color-666 pl-52 lh-52">该帐号卖家已缴纳保险金，承诺帐号如被找回将全额赔付。</p>
                </div>

            </div>
            <div class="p-30 border-bottom" v-if="goodsEO.isCloudAccount">
              <span class="span-icon-yyh f28 color-000">云验号</span>
              <p class="f28 color-666 pl-52 lh-52">买家付款后可直接进入游戏查看帐号信息</p>
            </div>

            <div class="scgtee-demo px-30 border-bottom" style="display: none">
              <div class="sgde-lf fl">
                <i class="shou"></i>
              </div>
              <div class="sgde-tn">
                <div class="tn-til f28 color-000">首次出售</div>
                <div class="tn-txt f28 color-666 mt-10">此帐号首次在5173出售！</div>
              </div>
            </div>
            <div class="scgtee-demo px-30 border-bottom" style="display: none">
              <div class="sgde-lf fl">
                <i class="shou"></i>
              </div>
              <div class="sgde-tn">
                <div class="tn-til f28 color-000">云验号</div>
                <div class="tn-txt f28 color-666 mt-10">买家付款后可直接进入游戏查看帐号信息！</div>
              </div>
            </div>
            <div class="mt-80 bg-m1 f36 color-fff text-center sgde-btn" @click="popupVisible=false">朕知道了</div>
          </div>
        </mt-popup>
        <div class="search-game border-bottom fw border-20" v-if="binds.hasCard || binds.hasEmail || binds.hasMob">
          <div class="sgame fw bg-fff f32">
            <span>绑定信息</span>
          </div>
        </div>
        <div class="mbgamelist-auth bg-fff  f32 border-bottom fw pl-30">
          <ul>
            <li v-if="binds.hasCard" class="fl" :class="{active: !binds.bindCard}">
              <span class="card f26 ">
                <i v-text="binds.bindCard? '已':'未'"></i>绑定身份证</span>
            </li>
            <li v-if="binds.hasMob" class="fl" :class="{active: !binds.bindMob}">
              <span class="mobile f26">
                <i v-text="binds.bindMob? '已':'未'"></i>绑定手机号</span>
            </li>
            <li v-if="binds.hasEmail " class="fl" :class="{active: !binds.bindEmail}">
              <span class="email f26 ">
                <i v-text="binds.bindEmail? '已':'未'"></i>绑定邮箱</span>
            </li>
          </ul>
        </div>
        <div class="mbgame-iftion fw border-20">
          <div class="iftdemo fl ">
            <a class="text-center bg-f8 f32" :class="{active: barShow}" @click="barShow = true">商品描述</a>
          </div>
          <div class="iftdemo fl ">
            <a class="text-center bg-f8 f32" :class="{active: !barShow}" @click="barShow = false">交易说明</a>
          </div>
        </div>
        <!--商品描述-->
        <div class="describe" v-show="barShow">
          <div class="rechseach-titl bg-fff border-bottom  fw px-30">
            <div class="sto_rent f30 fl">所在区服</div>
            <div class="sto_rerg f30 fr text-left sto-height">{{qf}}</div>
          </div>
          <div class="rechseach-titl bg-fff border-bottom  fw px-30" v-for="elem in ptrList" :key="elem.id" v-if="elem.attributeName !== '亮点描述'&&elem.attributeVal!=''">
            <div class="sto_rent f30 fl">{{elem.displayName||elem.attributeName}}</div>
            <div class="sto_rerg f30 fr text-left sto-height">{{elem.attributeVal}}</div>
          </div>
          <div class="rechseach-titl bg-fff border-bottom  fw px-30" v-for="elem in ptrList" :key="elem.id" v-if="elem.attributeName === '亮点描述'&&elem.attributeVal!=''">
            <div class="sto_rent f30 fl">帐号亮点</div>
            <div class="sto_rerg f30 fr text-left sto-height">{{elem.attributeVal}}</div>
          </div>
          <div v-if="overtime!=null&&overtime!=''" class="rechseach-titl bg-fff border-bottom  fw px-30">
            <div class="sto_rent f30 fl">商品有效期</div>
            <div class="sto_rerg f30 fr text-left">{{overtime}}</div>
          </div>
          <div v-if="goodsEO.description" class="rechseach-titl bg-fff border-bottom  fw px-30">
            <div class="sto_rent f30 fl">商品描述</div>
            <div class="sto_rerg f30 fr text-left sto-height">{{goodsEO.description}}</div>
          </div>
        </div>
        <!--交易说明-->
        <div class="clearfix"></div>
        <div class="explainn" v-show="!barShow">
          <div class="explain-coner">
            <div class="excon-titl color-m1">
              <i class="one fl">1</i>
              <span class="fl ml-15 f30">下单支付</span>
            </div>
            <div class="excon-titl excon-hihg py-20">
              <i class="fl">1</i>
              <span class="fl ml-15 f28 color-666">选择商品后付款</span>
            </div>
            <div class="excon-titl color-m1">
              <i class="two fl">1</i>
              <span class="fl ml-15 f30">验证帐号信息</span>
            </div>
            <div class="excon-titl excon-hihg py-20">
              <i class="fl">1</i>
              <span class="fl ml-15 f28 color-666">查看帐号最新截图，联系客服确认是否购买</span>
            </div>
            <div class="excon-titl color-m1">
              <i class="three fl">1</i>
              <span class="fl ml-15 f30">更换帐号绑定信息</span>
            </div>
            <div class="excon-titl excon-hihg py-20">
              <i class="fl">1</i>
              <span class="fl ml-15 f28 color-666">确认购买后，客服将绑定信息更换成买家信息</span>
            </div>
            <div class="excon-titl color-m1">
              <i class="four fl">1</i>
              <span class="fl ml-15 f30">提取帐号</span>
            </div>
            <div class="excon-titl excon-hihg py-20">
              <i class="fl">1</i>
              <span class="fl ml-15 f28 color-666">绑定信息更换成功后，买家即可提取帐号</span>
            </div>
            <div class="excon-titl color-m1">
              <i class="five fl">1</i>
              <span class="fl ml-15 f30">交易成功</span>
            </div>
            <div class="excon-hihg py-20">
              <i class="fl">1</i>
              <span class="fl ml-15 f28 color-666">5173将货款转账给卖家，交易成功</span>
            </div>
          </div>
          <div class="search-game border-bottom border-20">
            <div class="sgame bg-fff f32">
              <span>如果遇到以下情况，请警惕是骗子</span>
            </div>
            <ul>
              <li class="px-30 border-bottom f30 color-000">
                <i class="fl sgm-ico"></i>
                <em>向您索要游戏帐号和密码</em>
              </li>
              <li class="px-30 border-bottom f30 color-000">
                <i class="fl sgm-ico"></i>
                <em>向您索要绑定手机号、验证码</em>
              </li>
              <li class="px-30 border-bottom f30 color-000">
                <i class="fl sgm-ico"></i>
                <em>向买卖家索要【保证金】【手续费】【诚信金】要求支付宝转账等以各种名目索要金钱的</em>
              </li>
              <li class="px-30 border-bottom f30 color-000">
                <i class="fl sgm-ico"></i>
                <em>发送假冒链接(钓鱼链接)给买卖家，在您输入帐号密码后盗取您的游戏、支付宝、银行卡等帐号密码</em>
              </li>
              <li class="px-30 border-bottom f30 color-000">
                <i class="fl sgm-ico"></i>
                <em>自称是5173客服，并添加您的QQ，但官网验证不符的100%是骗子</em>
              </li>
            </ul>
          </div>
          <div class="guess-more f32 color-000 px-30 text-center fw bg-fff border-20">
            <span>
              <a href="javascript:void" @click="appKfClick()">验证客服真假</a>
            </span>
          </div>
        </div>
      </div>
      <!------------------------------------------------------手游交易保障------------------------------------>
      <!--11/7游戏交易保障start-->
      <div class="game-trading-guarantee px-30 bg-fff border-20 fw">
        <h1 class="game-trading-guarantee-title border-bottom f32 color-000 text-center">游戏交易保障</h1>
        <p class="game-trading-guarantee-tip mt-20 mb-20 f30 color-000">
          5173为您购买游戏商品提供全程客服协助，以保障您的交易安全，交易中有任何问题请联系客服。</p>
        <div class="clearfix">
          <div class="game-trading-guarantee-item text-center fl">
            <div class="game-trading-guarantee-item-icon">
              <i class="icon-trading-guarantee01"></i>
            </div>
            <p class="game-trading-guarantee-item-name mt-25 f28 color-666">客服全程协助</p>
          </div>
          <div class="between-space text-center fl">
            <span class="between-space-item"></span>
            <span class="between-space-item"></span>
            <span class="between-space-item"></span>
          </div>
          <div class="game-trading-guarantee-item text-center fl">
            <div class="game-trading-guarantee-item-icon">
              <i class="icon-trading-guarantee02"></i>
            </div>
            <p class="game-trading-guarantee-item-name mt-25 f28 color-666">付款保障</p>
          </div>
          <div class="between-space text-center fl">
            <span class="between-space-item"></span>
            <span class="between-space-item"></span>
            <span class="between-space-item"></span>
          </div>
          <div class="game-trading-guarantee-item text-center fl">
            <div class="game-trading-guarantee-item-icon">
              <i class="icon-trading-guarantee03"></i>
            </div>
            <p class="game-trading-guarantee-item-name mt-25 f28 color-666">卖家身份认证</p>
          </div>
        </div>
        <router-link :to="{ name: 'Safeguard',query:{app:isApp}}">
          <div class="learn-more f32 text-center">了解更多</div>
        </router-link>
      </div>
      <!------------------------------------------猜你喜欢------------------------------------------------------------------>
      <div v-if="showGuessLike">
        <div class="similar-tip">
          <span class="span-icon-up f30 color-666 px-30">
            猜你喜欢
          </span>
        </div>
        <!-- <mt-loadmore
          :bottom-all-loaded="allLoaded" ref="loadmore"
          id="boxs"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="busy"
          infinite-scroll-distance="10"
          infinite-scroll-immediate-check=false> -->
        <div v-if="index < guessLikeShowIndex" v-for="(item,index) in personLists" @click="goSimilarity(item)" class="mobilegames-conn border-bottom border-top mb-20 pr bg-fff">
          <div class="mbilegames-list ml-30 ">
            <div class="listware pr-30 py-30">
              <div class="mbgmes-img pr fl">
                <img v-if="!item.images" src="~images/default_img_info.jpg" style="width:100%;" class="previewer-demo-img" />
                <div v-else class="img-center">
                  <img style="min-width: 1.5rem!important;" :src="item.images.ThumbnailsUrl">
                </div>
              </div>
              <a>
                <div class="mbgmes-con">
                  <div class="mbl-title f30 color-000" style="
                     overflow: hidden;
                      line-height: 0.4rem;
                      max-height: 1.2rem;
                      height: auto !important">{{item.title}}
                  </div>
                  <div class="mbl-cper mt-10">
                    <div class="mbl-money color-m1 f32 fl font-arial">￥
                      <span class="font-bold">{{item.price}}</span>
                    </div>
                    <div class="mbl-icon fr">
                      <i class="an" v-if="item.is_axm && item.is_axm === 'true'"></i>
                      <i class="mai" v-if="item.is_mjbx"></i>
                      <i class="zhao" v-if="item.is_zhbp"></i>
                      <!--<i class="shou"></i>-->
                      <!-- <i class="tu" v-show="item.is_robot_capture && item.is_robot_capture==='true'"></i> -->
                    </div>
                  </div>
                  <div class="mbl-parea color-666 f24 clearfix">
                    <p class="mbl-qf fl w100" style="
                    width: 100%;
                      white-space: nowrap;
                     text-overflow: ellipsis;
                     overflow: hidden;
                     ">{{item.gameName}}/{{item.operatorName}}/{{item.gameServerName}}</p>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
        <p id="coins_id" v-if="guessLikeLoad">
          <img src="~images/coins/loading-sm.gif">
          <span>请等待。。。</span>
        </p>
        <!-- </mt-loadmore> -->
        <div class="tab-empty" v-if="personLists.length <= guessLikeShowIndex">
          <div class="empty-conn px-30">
            <div class="list-img"><img src="~images/gamelist.png"></div>
            <div class="emp-text f28 color-999 text-center">抱歉，没有更多商品了~</div>
          </div>
        </div>
        <div v-if="isShowMore">
          <div @click="guessLikeLoadMore()" v-if="personLists.length > guessLikeShowIndex" class="guess-more f32 color-000 px-30 text-center fw bg-fff border-20">
            <span>查看更多</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 固定底部 -->
    <div class="fixed-button3 border-top" data-style="fixed-bottom" v-show="!processShow">
      <div class="redbutton">
        <span>一口价：
          <em>￥{{goodsEO.price || goodsEO.Price}}</em>
        </span>
        <a class="tobuy" :class="{'button-disable':disableStatus}" @click="Buy">{{buytext}}</a>
      </div>
    </div>
    <!--商品列表下拉-更多消息-->
    <!--<div class="more_message border f36" v-show="moreStatus">
      <ul>
        <li class="list-more border-bottom" @click="messageClick"><i class="android"></i>消息</li>
        <li class="list-more border-bottom shareopen" @click="shareClick"><i class="sharew"></i>分享</li>
        <li class="list-more" @click="homeClick"><i class="home_back"></i>首页</li>
      </ul>
    </div>
    <div class="mstfiv" style="z-index:45" v-show="moreStatus" @click="mstfivClick"></div>-->
    <share></share>
    <pcess :processShow="processShow" @sonProcessShow="sonProcessShow"></pcess>
    <previewer :list="imageList" ref="previewer"></previewer>
    <loading-component></loading-component>
    <vue-go-top></vue-go-top>
  </div>
</template>
<script>
import GoTop from 'components/common/SortList_GoTop.vue'
import SelectRedPaper from 'components/common/redPaper/SelectRedPaper.vue'
import { mapState, mapGetters, mapActions } from 'vuex'
import loadingComponent from 'components/common/Loading.vue' // 加载时图片
import share from 'components/common/NewShare.vue' // 分享
import vueHead from 'components/Header.vue' // 分享
import pcess from 'components/help/Process' // tm的购买流程
import previewer from '../common/previwer.vue' // 查看图片
export default {
  components: {
    'vue-go-top': GoTop,
    share,
    pcess,
    loadingComponent,
    previewer,
    vueHead,
    'select-red-paper': SelectRedPaper,
  },
  data() {
    return {
      showGuessLike: false, // 是否显示猜你喜欢
      guessLikeLoad: true, // 猜你喜欢是否加载中
      guessLikeShowIndex: 5, // 猜你喜欢显示的条数,默认5条
      is_mjbx: false, // 是否有卖家保险
      is_zhbp:false,//是否找回包赔
      goodsId: this.$route.params.goodsId,
      isIndex: true,
      isIndexy: false,
      allLoaded: false,
      busy: false,
      pageSize: 12,
      start: 1,
      isKaiGuan: true,
      isShowMore: true,
      showCoins: false,
      personLists: [], // 猜你喜欢商品列表
      barShow: true,
      popupVisible: false,
      axmStatus: false,
      shareStatus: false,
      moreStatus: false,
      processShow: false,
      relievedShow: false,
      noImage: false,
      isShow: true,
      sharemsg: '',
      isNostore: false,
      midwidth: window.innerWidth + 'px',
      isApp: false,
      firstImageNext: this.$route.query.goods_img === '' || this.$route.query.goods_img === undefined ?
        null : this.imgfilter(this.$route.query.goods_img),
      shareType: ''
    }
  },
  beforeRouteLeave(to, from, next) {
    if (_hmt) _hmt.push(['_trackPageview', to.fullPath]);
    next()
  },
  computed: {
    disableStatus() {
      return this.goodsEO.publishStatus !== 2
    },
    qf() {
      let operatorName = this.goodsEO.operatorName ? this.goodsEO.operatorName + '/' : '' // 客户端
      let gameServerName = this.goodsEO.gameServerName ? this.goodsEO.gameServerName : '' // 服务器
      return operatorName + gameServerName
    },
    buytext() {
      if (this.disableStatus) {
        return '无法购买'
      } else {
        return '立即购买'
      }
    },
    xqtitle() {
      if (this.pList.length > 0) {
        let attr = '';
        this.pList.forEach(elem => {
          attr += ' ' + elem.attributeVal
        })
        return '【' + attr + '】' + this.goodsEO.title
      } else {
        return this.goodsEO.title
      }
    },
    ...mapState({
      goodsEO: state => {
        return state.account.goodsEO
      },
      goodsInfo: state => {
        return state.account.goodsInfo
      },
      pList: state => {
        return state.account.pList
      },
      imageList: state => {
        return state.account.imageList
      },
      errMsg: state => {
        return state.account.errMsg
      },
      warnMsg: state => {
        return state.account.warnMsg
      },
    }),
    binds() {
      /*
       手机绑定选择     对应的值：未绑定手机,已绑定手机
       身份证绑定选择   对应的值：未绑定身份证,已绑定身份证
       邮箱绑定选择     对应的值：未绑定邮箱,已绑定邮箱

       手机绑定选择     对应的值：已绑定,未绑定
       邮箱身份证选择   对应的值：已设置,未设置   */
      /**
       * 1. 手机 、 邮箱、 身份证 抽出三个键对应的值 （子字符串在当前字符串的位置）
       *
       * */
      let bindCard = '';
      let bindEmail = '';
      let bindMob = '';
      let bindAllMessage = this.pList.filter(v => v.attributeName === '帐号绑定')[0] || undefined
      if (bindAllMessage) {
        let binds = bindAllMessage.attributeVal.split(',')
        binds.some(v => v === '身份证') ?
          bindCard = '已绑定身份证' : bindCard = '未绑定身份证'
        binds.some(v => v === '密保邮箱') ?
          bindEmail = '已绑定邮箱' : bindEmail = '未绑定邮箱'
        binds.some(v => v === '密保手机') ?
          bindMob = '已绑定手机号' : bindMob = '未绑定手机号'
        bindCard = bindEmail = bindMob = '' // 账号绑定前端临时处理方案 -- 产品孙小晨 开发 gaga
      } else
        this.pList.map(v => {
          if (v.attributeName.indexOf('选择') > -1) {
            if (v.attributeName.indexOf('手机') > -1)
              bindMob = v.attributeVal
            if (v.attributeName.indexOf('邮箱') > -1)
              bindEmail = v.attributeVal
            if (v.attributeName.indexOf('身份证') > -1)
              bindCard = v.attributeVal
          }
        })
      let ret = { bindCard, bindEmail, bindMob }
      for (let key in ret) {
        if (ret[key] === '')
          continue  // 如果未空，则不设置为布尔值
        ret[key] = ret[key].indexOf('已') > -1
      }
      return {
        ...ret, text: { bindCard, bindEmail, bindMob }, ...{
          hasCard: bindCard !== '',
          hasEmail: bindEmail !== '',
          hasMob: bindMob !== ''
        }
      }
    },
    ptrList() {
      let obj = JSON.parse(JSON.stringify(this.pList))
      //        return obj  //测试使用
      return obj.filter(v => {
        return !(v.attributeName.indexOf('手机') > -1
          || v.attributeName.indexOf('邮箱') > -1
          || v.attributeName.indexOf('身份证') > -1)
      })
    },
    ...mapGetters({
      overtime: 'account/OVERTIME',
      firstImage: 'account/FIRSTIMAGE',
      eosigns: 'account/EOSIGNS'
    })
  },
  watch: {
    moreStatus(sta) {
      this.$bus.emit('headMoreStatus', sta)
    },
    errMsg(msg) {
      if (msg && Object.keys(msg).length > 0) {
        this.$messagebox({
          title: '提示',
          message: msg.message,
          closeOnClickModal: false
        }).then(() => {
          this.clearErr()
          if (msg.returnUrl) {
            location.href = msg.returnUrl
          }
        })
      } else {
        if (document.getElementsByClassName("mint-msgbox-wrapper").length > 0) {
          this.$messagebox.close()
        }
      }
    },
    warnMsg(msg) {
      if (msg && Object.keys(msg).length > 0) {
        this.$toast({
          message: msg.message,
          duration: msg.duration || 2500,
          position: msg.position || 'middle'
        })
        if (msg.duration) {
          setTimeout(() => {
            this.clearWarn()
          }, msg.duration)
        } else {
          setTimeout(() => {
            this.clearWarn()
          }, 3000)
        }
      }
    },
  },
  created() {
    this.isApp = !!this.$route.query.app;
  },
  mounted: function mounted() {
    if (location.href.indexOf('account') > -1) {
      this.shareType = '帐号'
    }
    var self = this
    this.setDefault()
    this.$nextTick(() => {
      setTimeout(() => {
        if (!this.firstImage) {
          this.noImage = true
        } else {
          if (!this.firstImageNext) {
            this.firstImageNext = this.imgfilter(this.firstImage)
          }
        }
      }, 500)
    })
    this.$bus.emit('isMore', true)
    this.$bus.on('moreStatus', sta => {
      this.moreStatus = sta
    })
    window.appCookie = this.appCookie;
  },
  methods: {
    //app添加历史记录
    appHistory(newItem) {
      let detailUrl = window.location.href;
      var src = 'goodsId=' + newItem.goodsId + '&goodsDetailUrl=' + detailUrl + '&price=' + newItem.price + '&title=' + newItem.title + '&imageUrl=' + newItem.goods_img + '&gameName=' + newItem.game_name + '&regionName=' + newItem.region_name + '&serviceName=' + newItem.server_name
      if (this.$isAndroid) {
        window.android.saveFootPrint(src);
      } else if (this.$isiOS) {
        window.webkit.messageHandlers.saveFootPrint.postMessage(src);
      }
    },
    /*app进来放问*/
    appCookie(cname, cvalue, path, options) {
      this.$setCookie(cname, cvalue, path, options);
    },
    //:to="{ name: 'ValidateCenter',query:{typeName:'验证中心',app:isApp}}"
    appKfClick() {
      if (this.$route.query.app) {
        location.href = '/vue/kf/validate-center?typeName=验证中心&app=' + this.isApp
      } else {
        this.$router.push({
          name: 'ValidateCenter',
          query: {
            typeName: '验证中心'
          }
        });
      }
    },
    clickAnXin() {
      if (this.isApp) {
        location.href = '/vue/help/apprelieved';
      } else {
        location.href = '/vue/help/relieved';
      }
    },
    guessLikeLoadMore() {
      this.guessLikeShowIndex += 7
    },
    gagaMethod() {
      //猜你喜欢接口
      this.$http.post(this.$CONSTANTS.APIMGSearch + 'goodsSearchService/guessLike',
        {
          bizOfferId: this.$route.params.goodsId,
          price: Number(this.goodsEO.price),
          pageSize: this.pageSize
        }).then(({ data }) => {
          this.guessLikeLoad = false
          if (data.success) {
            let goodsList = data.respSearch.hits
            let goodsId = this.goodsId
            this.personLists = goodsList.filter(v => {
              if (v.images) { // 获取图片
                v.images = JSON.parse(v.images)
              }
              if (v.flag && v.flag.indexOf('~') > -1) {
                v.is_mjbx = true
              } else if (v.flag && v.flag.indexOf('安') > -1) {
                v.is_axm = true
              } else if (v.flag && v.flag.indexOf('找') > -1) {
                v.is_zhbp = true
              }
              return v.id !== goodsId // 过滤当前发布单
            })
            if (this.personLists.length) this.showGuessLike = true
          }
        })
    },
    loadMore: function () {
      if (this.isFirse) {
        var self = this;
        this.busy = true;
        this.isKaiGuan = false
        this.showCoins = true;
        this.gagaMethod()
      }
    },
    goSimilarity(item) {
      let goods_source_type = item.cqSourType || 0
      // 注释保留 2018.4.1 yanjd@0.0.2
      // location.href = "/vue/mobile-game/account-detail/" + item.id + "/" + goods_source_type + (this.isApp ? '?app=true' : '')
      if (goods_source_type == 1) {
        location.href = "/vue/mobile-game/account-detail-new/" + item.id + "/" + goods_source_type + (this.isApp ? '?app=true' : '')
      } else {
        location.href = "/vue/mobile-game/account-detail/" + item.id + "/" + goods_source_type + (this.isApp ? '?app=true' : '')
      }
    },
    imgfilter: function (path) {
      if (path) {
        path = path.split('?')[0]
      }
      if (!path) {
        return path;
      }
      if (path === '//img1.5173.com/') {
        return '/dist/default_img.jpg'
      } else if (path.indexOf('img1.5173.com') > -1 && path.indexOf('x-oss-process=image') > -1) {
        return path
      } else if (path.indexOf('img1.5173.com') > -1) {
        return path + '?x-oss-process=image/resize,m_fixed,w_880/format,jpg/quality,q_60'
      } else if (path.indexOf('http://m5173.img-cn-hangzhou.aliyuncs.com') > -1) {
        return path + '?x-oss-process=image/resize,m_fixed,w_880/format,jpg/quality,q_60'
      } else {
        return path
      }
    },
    mstfivClick() {
      this.moreStatus = false
    },
    show(index) {
      if (this.firstImage) {
        this.$refs.previewer.show(index)
      }
    },
    Buy() {
      if (!this.disableStatus) {
        /*手游 type=1 */
        /* 如果是app的详情，使用lh 跳转 */
        if (this.isApp) {
          let str = `/vue/account/orderAccoApp/${this.$route.params.goodsId}/${this.$route.params.goods_source_type}/2`
          str = this.$route.query.st ? str + '?st=' + this.$route.query.st : str + '?app=' + this.isApp
          location.href = str
        } else {
          this.$router.push({
            name: 'orderAcco',
            params: {
              goodsId: this.$route.params.goodsId,  // 商品id
              goods_source_type: this.$route.params.goods_source_type, // 商品源0是m站  1是主站
              gameType: 2,
            },
            query: {
              st: this.$route.query.st,
              channelId: this.$route.query.channelId
            }
          })
        }
      }
    },
    processClick() {
      this.processShow = !this.processShow
    },
    sonProcessShow(val) {
      this.processShow = val
    },
    shareClick(firstImageNext, appTitle, gameName, qf) {

      if (this.$route.query.app) {
        if (this.$isAndroid) {
          window.android.toShare('goodsDetailUrl=' + window.location.href + '&imageUrl=' + firstImageNext + '&title=' + appTitle + '&gameDetail=' + gameName + '/' + qf);
        } else if (this.$isiOS) {
          window.webkit.messageHandlers.toShare.postMessage('goodsDetailUrl=' + window.location.href + '&imageUrl=' + firstImageNext + '&title=' + appTitle + '&gameDetail=' + gameName + '/' + qf);
        }

      } else {
        this.shareStatus = true
        this.moreStatus = false
        this.$bus.emit('shareShow', this.shareStatus)
        this.$bus.emit('busShareUrl', window.location.href)
      }
    },
    homeClick() {
      location.href = '/'
    },
    messageClick() {
      location.href = '/member/message.html'
    },
    setDefault: async function setDefault() {
      let arg;
      let pname, rname, sname;
      if (this.$route.params.goods_source_type == 1) { // 主站单子
        arg = {
          PcGoodsId: this.$route.params.goodsId
        }
      } else {
        arg = {
          goodsId: this.$route.params.goodsId
        }
      }
      await this.getGoodsEO(arg);
      if (this.goodsEO.bizOfferFlag && this.goodsEO.bizOfferFlag.indexOf('~') > -1) { // 判断是否有卖家保险
        this.is_mjbx = true
      }
      if (this.goodsEO.bizOfferFlag && this.goodsEO.bizOfferFlag.indexOf('找') > -1) { // 找回包赔
        this.is_zhbp = true
      }
      if (this.goodsEO.bizOfferFlag && this.goodsEO.bizOfferFlag.indexOf('v') > -1) { // 找回包赔
        this.is_spbz = true
      }
      this.isFirse = true
      this.firstImageNext = this.imgfilter(this.firstImage)
      this.loadMore()

      var attr = [];
      var dateTime = "";
      var data = new Date()
      var newItem = {};
      dateTime = data.getTime()
      if (this.goodsEO.id) {
        var storage = window.localStorage;
        if (window.localStorage.history) {
          attr = JSON.parse(window.localStorage.history)
          if (attr.length > 299) {
            attr.pop()
          }
          for (var i = 0; i < attr.length; i++) {
            if (attr[i].id == this.goodsEO.id) {
              attr.splice(i, 1)
            }

          }
        }
        newItem.id = this.goodsEO.id;
        if (this.goodsInfo.title) {
          newItem.title = this.goodsInfo.title;
        } else {
          newItem.title = this.goodsEO.title;
        }
        newItem.game_id = this.goodsInfo.game_id || this.goodsEO.gameId,
        newItem.goodsId = this.goodsEO.BizOfferId || this.goodsEO.id,
        newItem.region_id = this.goodsEO.operatorId,
        newItem.serviceProviderId = this.goodsEO.gamePlatformId,
        newItem.price = this.goodsEO.price;
        newItem.is_robot_capture = false; // 截图认证
        newItem.goods_img = this.firstImage;
        newItem.is_axm = this.goodsEO.isAxm;
        newItem.game_name = this.goodsEO.gameName;
        newItem.region_name = this.goodsEO.operatorName;
        newItem.server_name = this.goodsEO.gameServerName;
        newItem.dateTime = dateTime;
        newItem.gameType = 2;
        newItem.goodsSource = this.$route.params.goods_source_type;
        newItem.isSellerSafe = this.is_mjbx; //卖家保险
        newItem.isGoodsInsurance = this.is_spbz; //商品保障险
        newItem.isFindPrice = this.is_zhbp;//找回包赔
        attr.unshift(newItem)
        storage.setItem('history', JSON.stringify(attr))
      }
      console.log(newItem)
      var strItem = JSON.stringify(newItem)
      if(strItem!="{}"&&newItem.game_id){
        if (this.isApp) {
          this.appHistory(newItem)
        }
      }
      document.title = `${this.goodsEO.gameName || this.goodsEO.GameName}  ${this.goodsInfo.title || this.goodsEO.Title || this.goodsEO.propertyValuesTitle || this.goodsEO.title} ${this.goodsEO.price || this.goodsEO.Price}元`
      this.$bus.emit('headerText', this.goodsEO.gameName || this.goodsEO.GameName)
      this.$bus.emit('urlAddress', `${this.goodsEO.gameName || this.goodsEO.GameName}  ${this.shareType}  ${this.goodsInfo.title || this.goodsEO.Title || this.goodsEO.propertyValuesTitle || this.goodsEO.title}  ${this.goodsEO.price || this.goodsEO.Price}元  ${window.location.href}`)
      /*
       * 分享数据，可选参数
       * url, 分享的链接，如果不传则会自动获取浏览器地址
       * title, 分享的标题
       * summary, 分享的简介
       */
      this.$bus.emit('busShareQZone', {
        title: pname + rname + sname,
        url: encodeURIComponent(location.href),
        summary: this.xqtitle || this.goodsEO.Title
      })
      this.sharemsg = this.xqtitle + ' ' + location.href
      this.addBrowerNum({goodsId: this.$route.params.goodsId})
    },
    ...mapActions({
      getGoodsEO: 'MG_NEW_ACCOUNT_DETAIL',
      addBrowerNum: 'account/A_ADDBROWERNUM',
      clearGoodsEO: 'account/A_CLEARGOODSEO',
      clearErr: 'account/CLEAR_ERR',
      clearWarn: 'account/CLEAR_WARN',
    })
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.clearGoodsEO()
    })
  },
  beforeDestroy: function beforeDestroy() {
    this.$bus.emit('shareShow', false)
  },

}
</script>
<style scoped>
.img-center {
  margin-left: -400px;
  margin-right: -400px;
}
.img-center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.axmore {
  color: #1864ff;
}

.lh {
  line-height: 0.8rem;
}

.piccont {
  width: 100%;
  position: relative;
}

.middle {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 4.32rem;
  line-height: 4.32rem;
}

.more_message {
  display: block;
  position: fixed;
}

.more_message:before {
  content: "";
  height: 15px;
  width: 15px;
  background: #fff;
  display: block;
  position: absolute;
  top: -7.5px;
  right: 9px;
  border-width: 1px;
  border-style: solid;
  border-color: #e8e8e8 #fff #fff #e8e8e8;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.swiper-container img {
  max-height: 100%;
  max-width: 100%;
  display: inline;
}

.pcOrder03 ul {
  padding-top: 0.3rem;
}

.pcOrder03 ul li {
  float: left;
  width: 33.33%;
  box-sizing: border-box;
  padding-left: 0.1rem;
  padding-bottom: 0.3rem;
  line-height: 0.5rem;
}

.pcOrder03 ul li i {
  float: left;
  display: inline-block;
  margin-right: 0.1rem;
  background: url(~images/icon-gou.png) center center no-repeat;
  background-size: 0.2rem;
  border: 1px solid #34bb3a;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 100%;
}

.similar-tip {
  line-height: 0.9rem;
}

#coins_id {
  background: #fff !important;
  line-height: 50px !important;
  font-size: 12px !important;
  width: 100% !important;
  text-align: center !important;
}
</style>
